<template>
  <div slot="header" class="container-header head-form">
    <Form class="search">
      <Row>
        <i-col span="6">
          <FormItem label="门店名称">
            <Input v-model.trim="list.form.storeName" placeholder="门店名称" @on-enter="onSearchBtnClick" />
          </FormItem>
          <FormItem label="仓库地址">
            <SelectList v-model="list.form.hasRepo" list-type="isHave" />
          </FormItem>
          <FormItem label="门店类型">
            <SelectList v-model="list.form.storeTypeId" list-type="storeTypeList" />
          </FormItem>
          <FormItem label="扩展字段1">
            <Input v-model.trim="brandId" placeholder="扩展字段1" @on-change="onInputChange('brandId')" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="部门选择">
            <Cascader
              v-model="value"
              :data="departmentTree"
              :change-on-select="true"
              placeholder="请选择地区"
              @on-change="onSelectDpt"
            />
          </FormItem>
          <FormItem label="星标类型">
            <SelectList v-model="list.form.isStar" list-type="starTypeList" />
          </FormItem>
          <FormItem label="营业执照">
            <Input v-model.trim="list.form.businessLicenseNo" placeholder="输入营业执照" @on-enter="onSearchBtnClick" />
          </FormItem>
          <FormItem label="扩展字段2">
            <Input v-model.trim="storeTypeId" placeholder="扩展字段2" @on-change="onInputChange('storeTypeId')" />
          </FormItem>
        </i-col>
        <i-col span="5">
          <FormItem label="经销商选择">
            <!-- <DistributorSelect v-model="list.form.distributorId" /> -->
            <!-- <SelectList ref="dealerList" listType='dealerList' v-model='list.form.distributorId' /> -->
            <DistributorSelectName
              v-model="list.form.distributorName"
              placeholder="经销商选择"
              :data="prizeList"
              @enter="onSearchBtnClick"
              @search="getAllPrizes"
              @focus="onFocus"
              @select="onSearchBtnClick"
              @clear="prizeList = []"
            />
          </FormItem>
          <FormItem label="签约来源">
            <Select v-model="list.form.signSource" clearable placeholder="请选择签约来源">
              <Option label="线上" :value="0" />
              <Option label="线下" :value="1" />
            </Select>
          </FormItem>
          <FormItem label="登录手机">
            <Input v-model.trim="list.form.mobile" placeholder="输入门店登录手机" @on-enter="onSearchBtnClick" />
          </FormItem>
          <FormItem label="扩展字段3">
            <Input v-model.trim="distributorId" placeholder="扩展字段3" @on-change="onInputChange('distributorId')" />
          </FormItem>
        </i-col>
        <i-col span="5">
          <FormItem label="联系人姓名">
            <Input v-model.trim="list.form.ownerName" placeholder="输入联系人" @on-enter="onSearchBtnClick" />
          </FormItem>
          <FormItem label="门店手机号">
            <Input v-model.trim="list.form.storePhone" placeholder="输入门店手机号" @on-enter="onSearchBtnClick" />
          </FormItem>
          <FormItem label="品牌">
            <Select v-model="list.form.brandId" clearable @on-change="onSearchBtnClick">
              <Option v-for="(item, index) of brandList" :key="index" :value="item.brandId">{{ item.brandName }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col class-name="search" span="2">
          <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick" />
        </i-col>
      </Row>
    </Form>
  </div>
</template>

<script>
// import AreaSelect from '@/components/AreaSelect'
import SelectList from '@/components/SelectList'
import DistributorSelectName from '@/components/DistributorSelectName'
import { mapGetters } from 'vuex'
export default {
  components: {
    // AreaSelect,
    SelectList,
    DistributorSelectName
  },
  props: {
    list: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      prizeList: [],
      currValue: [],
      useTypeList: [
        { text: '是', value: true },
        { text: '否', value: false }
      ],
      opts: [
        { value: 'a', text: '门店名称' },
        { value: 'b', text: '门头名称' },
        { value: 'c', text: '联系人手机' },
        { value: 'd', text: '联系人姓名' }
      ],
      value: [],
      departmentTree: [],
      brandId: '',
      storeTypeId: '',
      distributorId: '',
      storeContractSourceFieldDTOList: []
    }
  },
  computed: {
    ...mapGetters([
      'brandList'
    ])
  },
  mounted () {
    this.getDptTree()
    this.value = [this.list.form.officeId, this.list.form.depId]
    this.$store.dispatch('getBrandList')
  },
  methods: {
    getAllPrizes () {
      let param = {
        keyword: this.list.form.distributorName,
        departId: this.list.form.depId ? this.list.form.depId : this.list.form.officeId
      }
      this.$jsonPost('/department/queryDistributorDepartment', param).then(data => {
        this.prizeList = (data.records || []).map(item => item.distributorName)
      })
    },
    onFocus () {
      this.getAllPrizes()
    },
    onSearchBtnClick () {
      this.$emit('onSearchBtnClick')
    },
    onAddBtnClick () {
      this.$emit('onAddBtnClick')
    },
    getDptTree () {
      this.$jsonPost('department/listDepartmentTree').then(res => {
        const func = (arr) => {
          arr.forEach(item => {
            item.label = item.name
            item.value = item.id
            if (item.children && item.children.length) {
              func(item.children)
            }
          })
        }
        func(res)
        this.departmentTree = res
      })
    },
    onSelectDpt (val) {
      let [d, a] = val
      this.list.form.officeId = d
      this.list.form.depId = a
      // let id = val[val.length-1]
      // if(!id) return
      // let obj = {
      //   departId: id,
      //   current: 1,
      //   size: 9999,
      //   isPage: false
      // }
      // this.$refs.dealerList.getListDispath('getDealerListByDpt', obj)
    },
    onSelectDealer (v) {
      if (v) {
        this.list.form.distributorId = v
      } else {
        this.list.form.distributorId = ''
      }
    },
    onInputChange (key) {
      const result = {
        fieldName: key,
        value: this[key]
      }
      const index = this.storeContractSourceFieldDTOList.findIndex(item => item.fieldName === key)
      if (index >= 0) {
        if (this[key]) {
          this.storeContractSourceFieldDTOList.splice(index, 1, result)
        } else {
          this.storeContractSourceFieldDTOList.splice(index, 1)
        }
      } else {
        this.storeContractSourceFieldDTOList.push(result)
      }
      this.list.form.storeContractSourceFieldDTOList = this.storeContractSourceFieldDTOList
    }
  }
}
</script>
